<template>
	<view class="container-white">
		<view class="practice-search"><input class="practice-search-input" type="text" v-model="search" placeholder="搜索" @input="searchFn" /></view>

		<view style="padding: 13upx 12upx 10upx 57upx;" v-if="dataList.length > 0">
			<view class="exam-box flex-box" v-for="(item, index) in dataList" :key="index" @click="enterExam(item)">
				<view class="exam-practice">
					<image class="exam-practice-datika" src="../../static/icon/icon-datika.png" />
					<view class="exam-title">
						{{ item.name }}
						<image class="exam-practice-go" src="../../static/icon/icon-go.png" />
					</view>
				</view>
			</view>
		</view>
		<view v-else class="no-data">暂无数据</view>

		<model v-if="hidden" @close="hidden = false">
			<view class="model-content">要继续进行练习吗？</view>
			<view class="model-footer">
				<button class="model-footer-btn cancel" @click="goPractice(0)">重新开始</button>
				<button type="primary" class="model-footer-btn primary" @click="goPractice(1)">继续</button>
			</view>
		</model>
	</view>
</template>

<script>
let stop;
import { post_md5 } from '../../common/request';
import { setNavTitle } from '../../common/common';
export default {
	data() {
		return {
			search: '',
			dataList: [],
			hidden: false,
			checkedId: null,
			parentId: [0]
		};
	},
	onLoad(options) {
		this.getQuesList();
		// #ifdef APP-PLUS
		if (options.tag) {
			var webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewButtonStyle(0, {
				text: '\ue6ae'
			});
		}
		// #endif
	},
	onReady() {
		setNavTitle('专业提升');
	},
	onBackPress() {
		if (this.parentId.length > 1) {
			this.parentId.splice(this.parentId.length - 1, 1);
			this.getQuesList();
			return true;
		}
	},
	methods: {
		searchFn(e) {
			if (stop) clearTimeout(stop);
			stop = setTimeout(_ => {
				post_md5('/exam-app/craftbank/searchcate', {
					cateName: e.target.value
				}).then(res => {
					this.dataList = res.data;
				});
			}, 1500);
		},
		// 根据用户获取工种题库列表
		getQuesList() {
			post_md5('/exam-app/craftbank/catebyparentid', {
				parentId: this.parentId[this.parentId.length - 1]
			}).then(res => {
				this.dataList = res.data;

				let practiceList = uni.getStorageSync('practiceList') ? JSON.parse(uni.getStorageSync('practiceList')) : null;
				if (practiceList == null) {
					practiceList = {};
					this.dataList.forEach(x => {
						practiceList[`${x.id}`] = '';
					});
					uni.setStorageSync('practiceList', JSON.stringify(practiceList));
				}
			});
		},

		enterExam(item) {
			if (item.childNum > 0) {
				this.parentId.push(item.id);
				this.getQuesList();
			} else {
				post_md5('/exam-app/craftbank/quescount', {
					quesCateId: item.id
				}).then(res => {
					this.checkedId = item.id;
					if (res.data > 0) {
						let practiceList = JSON.parse(uni.getStorageSync('practiceList'));
						if (isNaN(parseInt(practiceList[`${this.checkedId}`]))) {
							uni.navigateTo({
								url: '../topic/practice-topic?quesCateId=' + this.checkedId
							});
						} else {
							this.hidden = true;
						}
					} else {
						let practiceList = JSON.parse(uni.getStorageSync('practiceList'));
						practiceList[`${item.id}`] = '';
						uni.setStorageSync('practiceList', JSON.stringify(practiceList));
						uni.navigateTo({
							url: '../topic/practice-topic?quesCateId=' + this.checkedId
						});
					}
				});
			}
		},

		goPractice(val) {
			this.hidden = false;
			let practiceList = JSON.parse(uni.getStorageSync('practiceList'));
			if (val > 0) {
				if (!isNaN(parseInt(practiceList[`${this.checkedId}`]))) {
					uni.navigateTo({
						url: '../topic/practice-topic' + `?quesCateId=${this.checkedId}&page=${parseInt(practiceList[`${this.checkedId}`])}`
					});
					return false;
				}
			}
			uni.navigateTo({
				url: '../topic/practice-topic' + `?quesCateId=${this.checkedId}`
			});
		}
	}
};
</script>

<style>
.exam-box {
	flex: 1;
	color: #333333;
}

.exam-title {
	height: 87upx;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 30upx;
	border-bottom: 1px solid #e6e6e6;
}

.exam-practice-datika {
	width: 42upx;
	height: 42upx;
	margin-right: 29upx;
}

.exam-practice {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 43upx;
}

.exam-practice-go {
	width: 18upx;
	height: 34upx;
}

.exam-time {
	font-size: 22upx;
	line-height: 40upx;
}

.exam-place {
	font-size: 22upx;
	line-height: 40upx;
}

.tips {
	font-size: 22upx;
	font-weight: 400;
	color: #999999;
	height: 174upx;
	text-align: center;
}

.tips-time {
	color: #02a8f4;
}

.enter-btn {
	width: 200upx;
	line-height: 60upx;
	border-radius: 30upx;
	font-size: 28upx;
	font-weight: 600;
	color: #02a8f4;
	border: 2px solid #02a8f4;
	background: #ffffff;
}
</style>
<style scoped>
.practice-search {
	width: 100%;
	box-sizing: border-box;
	padding: 16upx;
	background: rgb(237, 237, 237);
}

.practice-search-input {
	padding: 10upx;
	background: #fff;
	line-height: 26upx;
	font-size: 26upx;
	text-align: center;
}
</style>
